CodePenを使ってReact.jsを学ぶ練習log その2

CodePenを使ってReact.jsを学ぶ練習logの続き

ページが重くなってきたので分けた

/icons/hr.icon

2020-11-20 07:32:39 問題1をやる

https://codesandbox.io/s/gifted-lovelace-4fx9l

07:41:26 Random User Generatorのresponseの型定義を書く

08:00:08 できた

code:Table.tsx

import * as React from "react";

import { RandomUserResponse } from "./RandomUserResponse";

import "./styles.css";

export const Table = () => {

const data, setData = React.useState<RandomUserResponse>();

React.useEffect(() => {

(async () => {

const user = (await fetch(

"https://randomuser.me/api/?results=5&nat=us&inc=gender,name,email"

).then((res) => res.json())) as RandomUserResponse;

setData(user);

})();

}, []);

const Header = (

<tr>

<th>

</th>

<th>

<abbr title="Gender">Gender</abbr>

</th>

<th>

<abbr title="Emal">Email</abbr>

</th>

</tr>

);

return (

<thead>{Header}</thead>

<tfoot>{Header}</tfoot>

<tbody>

{data?.results.map((user, i) => (

<th>{${user.name.title} ${user.name.first} ${user.name.last}}</th>

<td>{user.gender}</td>

<td>{user.email}</td>

</tr>

))}

</tbody>

</table>

</div>

);

};

code:RandomUserResponse.tsx

export interface RandomUserResponse {

results: {

gender: string;

name: {

title: string;

first: string;

last: string;

};

email: string;

}[];

info: {

seed: string;

results: number;

page: number;

version: string;

};

}

08:05:10 問題2

custom Hooksを使う

08:15:54 できた

これに少し手を加えただけ

tippy.jsを使った

code:tsx

import { useEffect } from "react";

import tippy from "tippy.js";

import "tippy.js/dist/tippy.css";

export function useTooltip(id: string, content: string) {

useEffect(() => {

tippy(#${id}, { content });

}, id, content);

}

code:tsx

import * as React from "react";

import "./styles.css";

import { useTooltip } from "./useTooltip";

export default function App() {

useTooltip("myButton", "Hello world!");

useTooltip("myParagraph", "This is another tooltip.");

return (

<button id="myButton">Hover me</button>

<p>

<span id="myParagraph">Hover me too!</span>

</p>

</>

);

}

08:22:14 問題1

https://codesandbox.io/s/great-herschel-41r0y

おかしい編集できなくなった

App.tsxを編集しても、元に戻ってしまう

08:32:22 タブを開き直したら直った

08:50:11 できた

code:useGifs.ts

import * as React from "react";

import { mockApi } from "./mockApi";

export const useGifIds = () => {

const gifs, setGifs = React.useState<{ id: string }[]>([]);

React.useEffect(() => {

(async () => {

const response = await mockApi();

setGifs(response);

})();

}, []);

return gifs;

};

code:useSlider.ts

import React from "react";

import { Swiper } from "swiper";

export const useSlider = <T>(targetList: T[]) => {

const slider, setSlider = React.useState<Swiper>();

React.useEffect(

() =>

setSlider(

new Swiper("#slider", {

spaceBetween: 10,

slidesPerView: 2,

navigation: {

nextEl: ".swiper-button-next",

prevEl: ".swiper-button-prev"

}

})

[]

);

React.useEffect(() => {

if (targetList.length > 0) {

slider?.update();

↑ここで「sliderがdependency listにない」と警告が出る

sliderの更新に合わせる必要はないので無視していいはず

code:useSlider.ts

}

}, targetList);

};

code:mockApi.ts

export function mockApi() {

return new Promise((ok: (json: { id: string }[]) => void) => {

setTimeout(

() =>

ok([

{ id: "10dU7AN7xsi1I4" },

{ id: "tBxyh2hbwMiqc" },

{ id: "ICOgUNjpvO0PC" },

{ id: "33OrjzUFwkwEg" },

{ id: "MCfhrrNN1goH6" },

{ id: "rwCX06Y5XpbLG" }

]),

1000

);

});

}

code:App.tsx

import * as React from "react";

import "./styles.css";

import { useGifIds } from "./useGifs";

import { useSlider } from "./useSlider";

function Gifs() {

const gifs = useGifIds();

useSlider(gifs);

return (

{gifs.map((gif) => (

<img

key={gif.id}

className="swiper-slide"

src={https://media.giphy.com/media/${gif.id}/giphy.gif}

alt=""

))}

</div>

</div>

);

}

export default function App() {

return (

</div>

);

}

08:53:55 これでReact入門チュートリアルは終了した

あとはReact Table, react-calendar-timeline, /icons/firebase.iconの練習をしたらいよいよtakker-schedulerの設計に入れる

#2020-11-20 07:32:26